import React from 'react';
import cx from 'classnames';
import style from './style.objective-relative';
import util from '../../util';
import { Link, Button, Loading } from 'sq-ui';
import { NextGuide } from '../guide/Guide';

function renderContent(props) {
  const {
    okr,
    content,
    editable,
  } = props;

  const {
    ancester,
    children,
  } = okr;

  const AncesterNull = () => {
    if (!editable) return <div style={{ fontSize: '12px', color: '#777', textAlign: 'center' }}>尚未设置上级目标</div>;
;
    return (
      <div className={style['detail-null']}>
        <p style={{ color: '#777', fontSize: '12px', lineHeight: 1 }}>尚未设置上级目标</p>
        <Button
          style={{
            fontSize: '12px',
            width: '150px',
            height: '30px',
            marginTop: '15px',
          }}
          radius="30px"
          blueLine
          onClick={() => {
            if (props.onClose) props.onClose();
            props.editObjective();
          }}
          label="打开目标编辑进行设置"
        />
      </div>
    );
  };
  const renderAncester = (
    <div>
      <h2>上级目标</h2>
      <ul className={style.ancester}>
        {
          !util.isNull(ancester) ?
          [ 
            ...util.deepClone(ancester).reverse(),
            { content }
          ].map((v, i) => (
            <li key={i}>
              {
                i == ancester.length
                ? <span>{v.content}</span>
                : <Link label={ v.content } to={`/okr/objectives/${v.objectiveId}?type=${v.type}&${v.type == 3? 'userId=': 'teamId='}${v.ownerId}`} />
              }
            </li>
          )) : Array.isArray(ancester) ? (
            <AncesterNull />
          ) : (
            <Loading small />
          )
        }
      </ul>
    </div>
  );

  const renderChildren = (
    <div>
      <h2>子目标</h2>
      <ul>
        {
          !util.isNull(children) ?
          children.map((v, i) => (
            <li key={i}>
              <Link
                label={v.content}
                to={`/okr/objectives/${v.objectiveId}?type=${v.type}&${v.type == 3? 'userId=': 'teamId='}${v.ownerId}`}
              />
            </li>
          )) : Array.isArray(children) ? (
            <div style={{ fontSize: '12px', color: '#777', textAlign: 'center' }}>没有子目标</div>
          ) : (
            <Loading small />
          )
        }
      </ul>
    </div>
  );

  return (
    <div className={style.relatives}>
      { renderAncester }
      {
        (renderAncester && renderChildren) ? <hr/> : null
      }
      { renderChildren }
    </div>
  );
}

function ObjectiveRelative(props) {
  return (
    <div
      className={cx(style.root, props.className, {
        [style['objective-detail']]: props.detail,
      })}
    >
      { renderContent(props) }
      <Button
        className={style.tree}
        to={`#/objectives/${props.objectiveId}/relative-tree?${util.body(props.query)}`}
        target="_blank"
        blueLine
        radius="20px"
        label="卡片视图"
        style={{ width: '72px', fontSize: '12px', height: '20px', position: 'absolute', right: '15px',top: props.detail ? '-2px' : '15px' }}
        onClick={() => {
          if (!props.detail && props.app.naviStep === 7 && props.app.guide == 3) {
            props.actions.setStepGuide(4);
          }
        }}
      />
      {
        (!props.detail && props.app.naviStep === 7 && props.app.guide == 3) ? (
          <NextGuide
            left
            styles={{
              left: '5px',
              top: '7px',
            }}
            str="点击这里"
          />
        ) : null
      }
    </div>
  );
}

ObjectiveRelative.propTypes = {
  active: React.PropTypes.bool,
};

export default ObjectiveRelative;
